<template>
    <div class="calendar-container">
        <div class="festival" v-if="calendar.lunarFestival">
            {{calendar.lunarFestival}} 
        </div>
        <div class="festival" v-if="calendar.gregorianFestival">
            {{calendar.gregorianFestival}}
        </div>
        <div class="festival" v-if="calendar.solarTerm">
            {{calendar.solarTerm}}
        </div>
        <div class="weekday" :class="[!calendar.lunarFestival && !calendar.gregorianFestival && !calendar.solarTerm ? 'festival' : '']">
            {{calendar.weekday}}
        </div>
        <div class="gregorian-day">{{calendar.gregorianDay}}</div>
        <div class="lunar-day">
            {{calendar.lunarMonthCn}}{{calendar.lunarDayCn}}
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import getCalendar from "@/utils/calender";
const calendar = ref(getCalendar({
    time: new Date()
}));

</script>
<style lang="scss" scoped>
.calendar-container {
    width: 140px;
    background: #fff;
    box-shadow: 1px 1px 5px #ccc;
    padding: 10px;
    border-radius: 10px;
    user-select: none;
    cursor: pointer;
    .festival{
        color: var(--el-color-primary);
        padding-top: 5px;
        font-size: 16px;
        &:first-child{
            padding-top: 0;
        }
    }
    .weekday{
        font-size: 14px;
        color: #999;
    }
    .gregorian-day{
        font-size: 36px;
        padding-top: 5px;
        font-weight: 600;
    }
    .lunar-day{
        font-size: 14px;
        padding-top: 5px;
    }
}
</style>
